<template>
  <div class="content1">
    <nav-title title="我的下属" routerLink="index"/>
    <div v-if="showIdentity" class="text-box">
      <div class="text">我的身份</div>
      <div class="separated"></div>
      <div class="select">
        <popup-picker value-text-align="left" :data="identityList"
                      :columns="identityLength" v-model="identity"
                      show-name @on-hide="submitIdentity">
        </popup-picker>
      </div>
    </div>

    <div class="text-box">
      <div class="text">汇报线</div>
      <div class="separated"></div>
      <div class="select">
        <group>
          <popup-picker value-text-align="left"
                        :data="underLineType" :columns="2"
                        v-model="underline" show-name @on-hide="submitUnderLine">
          </popup-picker>
        </group>
      </div>
    </div>

    <div v-if="noChildren">
      <div class="point-top" v-if="showTop" @click="showParent()">
        <img src="./image/up-arrow.png" alt="">
      </div>
      <div class="the-superior" style="position:relative">
        <div class="avatar_wrap" @click="staffArchives(topStaffInfo.emplid)" :style="{backgroundImage: 'url(' + myPhoto + ')' }">
          <span class="sub-num-wrap" v-if="topStaffInfo.underLineSize">&nbsp;</span>
          <span class="sub-num" v-if="topStaffInfo.underLineSize">{{topStaffInfo.underLineSize > 99 ? '99+' : topStaffInfo.underLineSize}}</span>
        </div>
        <!-- <span class="top-num" v-if="topStaffInfo.underLineSize != 0">{{topStaffInfo.underLineSize}}</span> -->
        <div class="staff-name">{{topStaffInfo.staffName}}</div>
        <div>{{topStaffInfo.staffJobcodeDescr}}</div>
      </div>
      <div>
        <div v-if="topStaffInfo.underLineSize === 1" class="avatarArrange3">
          <img src="./image/middle-arrow.png" alt="">
        </div>
        <div v-else="" class="avatarArrange3">
          <img src="./image/left-arrow.png" alt="">
          <img src="./image/middle-arrow.png" alt="">
          <img src="./image/right-arrow.png" alt="">
        </div>
      </div>
      <div class="underling-box">
        <div v-if="topStaffInfo.underLineSize === 1" class="underling-one">
          <div v-for="sub in subStaff" class="the-superior">
            <img v-if="sub.photoUrl != null" class="superior_img" :src="logoAttachPath+sub.photoUrl" alt="" @click="staffArchives(sub.emplid)">
            <img v-if="sub.photoUrl == null && sub.sex == 'M'" class="superior_img" src="../../../static/img/common/man.png" alt="" @click="staffArchives(sub.emplid)">
            <img v-if="sub.photoUrl == null && sub.sex == 'F'" class="superior_img" src="../../../static/img/common/woman.png" alt="" @click="staffArchives(sub.emplid)">
            <span class="sub-num-wrap" v-if="sub.underLineSize != 0">&nbsp;</span>
            <span class="sub-num" v-if="sub.underLineSize != 0">{{sub.underLineSize > 99 ? '99+' : sub.underLineSize}}</span>
            <div>{{sub.name}}</div>
            <div>{{sub.jobcodeDescr}}</div>
            <img v-if="sub.underLineSize > 0" src="./image/down-arrow.png" alt="" @click="changeStaff(sub.emplid,sub.emplRcd)">
          </div>
        </div>
        <div v-else class="underling">
          <div v-for="sub in subStaff" class="the-superior">
            <span class="sub-num-wrap" v-if="sub.underLineSize != 0">&nbsp;</span>
            <span class="sub-num" v-if="sub.underLineSize != 0">{{sub.underLineSize > 99 ? '99+' : sub.underLineSize}}</span>
            <img v-if="sub.photoUrl != null" class="superior_img" :src="logoAttachPath+sub.photoUrl" alt="" @click="staffArchives(sub.emplid)">
            <img v-if="sub.photoUrl == null && sub.sex == 'M'" class="superior_img" src="../../../static/img/common/man.png" alt="" @click="staffArchives(sub.emplid)">
            <img v-if="sub.photoUrl == null && sub.sex == 'F'" class="superior_img" src="../../../static/img/common/woman.png" alt="" @click="staffArchives(sub.emplid)">
            <div>{{sub.name}}</div>
            <div>{{sub.jobcodeDescr}}</div>
            <img v-if="sub.underLineSize > 0" src="./image/down-arrow.png" alt="" @click="changeStaff(sub.emplid,sub.emplRcd)">
          </div>
        </div>
      </div>

    </div>
    <div v-else class="no-subordinates">
      <img src="./image/no-subordinates.png" alt="">
      <p>抱歉，您还没有下属信息...</p>
    </div>

  </div>
</template>

<script>
  import { getSubBasicInfo,getMySubBasicInfo } from '../../api/api'
  import { json2Form } from '../../util/http'
  import { Group, PopupPicker } from 'vux'

  export default {
    name: 'subordinates',
    components: {
      Group,PopupPicker
    },
    mounted(){
      //我的身份只查当前用户的身份信息
      let currentParams = {
        emplid: this.$store.state.eid
      };
      this.getCurrentIdentity(currentParams);
      //获取当前传过来的用户的基本信息
      let params = {
        emplid: this.$route.query.emplid,
        emplRcd: this.$route.query.myEmplRcd
      };
      this.getMyInfo(params);
    },
    data() {
      return {
        underLineType:[{name: '直线汇报', value: 'DIRECT'},{name: '虚线汇报', value: 'IN_DIRECT'}],
        underline: ['DIRECT'],

        identityList: [],
        identityLength: 1,
        identity: [],

        topStaffInfo: [],
        myPhoto: '',
        topId: '',//最上层id
        myId: '',

        showIdentity: false,
        showTop: true,//是否显示上层节点
        selectIdentity: false,//是否用户选择的身份
        subStaff: [],//下级员工
        logoAttachPath: this.$store.state.logoAttachPath,
        noChildren: true//是否有子节点
      }
    },
    methods: {
      submitUnderLine(){
        //根据汇报线类型查询,获取当前用户基本信息
        let params = {
          emplid: this.$store.state.eid
        };
        this.noChildren = true;
        this.getMyInfo(params);
      },
      submitIdentity(){
        //根据我的身份查询,获取当前用户基本信息
        this.selectIdentity = true;
        let params = {
          emplid: this.$store.state.eid
        };
        this.noChildren = true;
        this.getMyInfo(params);
      },
      //获取上级信息
      showParent(){
        this.getParentInfo();
      },
      getParentInfo(){
        //先判断是虚线还是直线
        if(this.underline[0] == 'IN_DIRECT'){
          let params = {
            rsReportEmpid: this.topStaffInfo.supervisorId,
            emplRcd: this.topStaffInfo.cEmplRcd1
          };
          this.getMyInfo(params);
        }else if(this.underline[0] == 'DIRECT'){
          let params = {
            emplid: this.topStaffInfo.supervisorId,
            emplRcd: this.topStaffInfo.cEmplRcd1
          };
          this.getMyInfo(params);
        }
      },
      getCurrentIdentity(currentParams){
        getSubBasicInfo(currentParams).then(res=>{
          if(res && res.retCode === '000000' ){
          //我的身份只是展示当前用户的身份
            if(res.retData.length > 1){
              this.showIdentity = true;
              this.identityList = [];//取值前清空list
              for(let i=0; i<res.retData.length; i++){
                this.identityList.push({name: res.retData[i].jobcodeDescr,value: res.retData[i].emplRcd});
              }
              this.identityLength = res.retData.length;
            }
          }
        }).catch (res=>{
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })
      },
      getMyInfo(params){
        //判断最上层是否是本人，若是，则不能再向上点击
        if(params.emplid == this.$store.state.eid){
          this.showTop = false;
        }else{
          this.showTop = true;
        };
        if(!this.noChildren){
          return;
        }
        getSubBasicInfo(params).then(res => {
          //成功：000000
          if(res && res.retCode === '000000' ){
            if(res.retData.length > 1){
              //根据选择的身份显示
              for(let i=0; i<res.retData.length; i++){
                if(this.identity == res.retData[i].emplRcd){
                  //展示该身份的值
                  this.topId = res.retData[i].emplid;
                  this.topStaffInfo.staffName = res.retData[i].name;
                  this.topStaffInfo.staffJobcodeDescr = res.retData[i].jobcodeDescr;
                  this.topStaffInfo.staffPhoto = res.retData[i].photoUrl;
                  this.topStaffInfo.emplid = res.retData[i].emplid;
                  this.topStaffInfo.emplRcd = res.retData[i].emplRcd;
                  //直线
                  this.topStaffInfo.supervisorId = res.retData[i].supervisorId;
                  this.topStaffInfo.cEmplRcd1 = res.retData[i].cEmplRcd1;
                  //虚线
                  this.topStaffInfo.rsReportEmpid = res.retData[i].rsReportEmpid;
                  this.topStaffInfo.cEmplRcd2 = res.retData[i].cEmplRcd2;

                  if(res.retData[i].photoUrl){
                    this.myPhoto = (this.$store.state.logoAttachPath+res.retData[i].photoUrl);
                  }else{
                    //根据性别判断显示头像
                    if(res.retData[i].sex == 'M'){
                      this.myPhoto = require('../../../static/img/common/man.png');
                    }else{
                      this.myPhoto = require('../../../static/img/common/woman.png');
                    }

                  }
                }
              }
            }else{
              this.topId = res.retData[0].emplid;
              this.topStaffInfo.staffName = res.retData[0].name;
              this.topStaffInfo.staffJobcodeDescr = res.retData[0].jobcodeDescr;
              this.topStaffInfo.staffPhoto = res.retData[0].photoUrl;
              this.topStaffInfo.emplid = res.retData[0].emplid;
              this.topStaffInfo.emplRcd = res.retData[0].emplRcd;
              //直线
              this.topStaffInfo.supervisorId = res.retData[0].supervisorId;
              this.topStaffInfo.cEmplRcd1 = res.retData[0].cEmplRcd1;
              //虚线
              this.topStaffInfo.rsReportEmpid = res.retData[0].rsReportEmpid;
              this.topStaffInfo.cEmplRcd2 = res.retData[0].cEmplRcd2;

              if(res.retData[0].photoUrl){
                this.myPhoto = (this.$store.state.logoAttachPath+res.retData[0].photoUrl);
              }else{
                //根据性别判断显示头像
                if(res.retData[0].sex == 'M'){
                  this.myPhoto = require('../../../static/img/common/man.png');
                }else{
                  this.myPhoto = require('../../../static/img/common/woman.png');
                }
              }
            }

            //如果identity为空，默认取第一条，否则取值为用户选中的那个
            if(this.selectIdentity){
              this.identity = [parseInt(this.identity)];
            }else{
              this.identity = [res.retData[0].emplRcd];
            }
            //获取下属信息
            this.getSub(params.emplid);
          }else{
            // 显示
            this.$vux.alert.show({
              title: '提示',
              content: res.retMsg
            })
          }
        }).catch (res=>{
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
       })
      },
      getSub(myEmplid){
        let params = {
          emplid: myEmplid,
          emplRcd: this.identity+'',
          underLineType: this.underline+''
        };
        //根据emplid+我的身份(emplRcd)+汇报线(underLineType)
        getMySubBasicInfo(params).then(res=>{
          //成功：000000
          if(res && res.retCode === '000000' ){
            this.topStaffInfo.underLineSize = res.retData.length;
            if(res.retData.length > 0){
              this.noChildren = true;
              this.subStaff = res.retData;
            }else{
              this.noChildren = false;
            }
          }

        }).catch(res=>{
          this.$vux.alert.show({
            title: '警告',
            content: '网络异常，请稍后重试'
          })
        })

      },
      //点击获取此人的信息及下级信息
      changeStaff(myEmplid,emplRcd){
        let params = {
          emplid: myEmplid,
          emplRcd: emplRcd
        }
        this.getMyInfo(params);
      },
      //点击获取此人的档案信息，并传参数以便返回时可以回到初始原状态
      staffArchives(myEmplid){
        this.$router.push({
          name:'Archives',
          query:{
            archivesId: myEmplid,
            topId: this.topStaffInfo.emplid,
            myEmplRcd: this.topStaffInfo.emplRcd
          }
        });
      }

    }
  }
</script>

<style type="text/scss" lang="scss">
  .content1 {
    .avatarArrange3{
      margin: 10px 0;
    }
    .avatar_wrap{
      width: 90px;
      height: 90px;
      margin: 0 auto;
      background-size: 100% 100%;
      border-radius: 50%;
      position: relative;
    }
    .sub-num-wrap, .sub-num{
      position: absolute;
      height: 20px;
      top: 0px;
    }
    .sub-num-wrap{
      width: 20px;
      right: 0px;
      border: 1px solid orange;
      border-radius: 50%;
      background: orange;
    }
    .sub-num{
      width: 30px;
      right: -5px;
      font-size: 10px;
      text-align: center;
      line-height: 20px;
      color: white;
    }
    .staff-name {
      color: #333;
      font-weight: 700;
    }
    .text-box {
      display: flex;
      justify-content: flex-start;
      margin: 10px 0;
      padding: 0 10px;
      .separated {
        background-color: white;
        flex: 1;
      }
      .text {
        flex: 16;
        font-size: 16px;
        height: 36px;
        background-color: #1CAAFE;
        text-align: left;
        color: white;
        line-height: 36px;
        font-weight: 900;
        padding-left: 10px;
      }
      .select {
        flex: 50;
        font-size: 16px;
        height: 36px;
        background-color: #1CAAFE;
        color: #fff !important;
        line-height: 36px;
        font-weight: 900;
        padding-left: 10px;
        .weui-cells{
          background-color: #1CAAFE !important;
        }
        .weui-cell{
          padding: 0 15px !important;
          line-height: 35px;
        }
        .weui-cell_access:active{background-color: #1CAAFE !important;}
        .vux-cell-value{color: #fff !important;}
      }
    }
    .underling-box{
      width: 100%;
    }
    .superior_img{
      width: 90px;
      height: 90px;
      margin: 0 auto;
      background-size: 100% 100%;
      border-radius: 50%;
      position: relative;
    }
    .underling {
      width: 100%;
      display: flex;
      margin: 0 auto;
      justify-content: space-between;
      overflow-x: scroll;
      overflow-y: hidden;
      .the-superior {
        position: relative;
        min-width: 100px;
      }
    }
    .underling-one{
      text-align: center;
      .the-superior {
        position: relative;
      }
    }
    .avatarArrange1 {
      img:nth-child(1){
        margin-left: 15px;
      }
      img:nth-child(2){
        margin-left: -10px;
      }
      img:nth-child(3){
        margin-left: -9px;
      }
    }
    .no-subordinates{
      margin-top: 30px;
      p{
        margin: 10px 0;
      }
    }
  }
</style>
